<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
</script>
<title>购物车</title>
<script type="text/javascript">	

/*减少所购商品的数量*/
function minusNumber(addTag,id){
	var number=addTag.nextElementSibling;
	number.value=number.value*1-1;
	if(number.value <= 0 ){
		alert("宝贝数量必须是大于0");
		return false;
	}else{
	$.ajax({
				url : "${pageContext.request.contextPath }/updateCartsMinus.do",
				type : "post",
				// data表示发送的数据
				data : JSON.stringify({
					goods_id : id,
					number : number.value
				}),
				// 定义发送请求的数据格式为JSON字符串
				contentType : "application/json;charset=UTF-8",
				//定义回调响应的数据格式为JSON字符串,该属性可以省略
				dataType : "json",
				//成功响应的结果
				success : function(data) {
					if (data != null) {
						alert("该商品数量成功减了1");
					}else{
						alert("请求错误，等待一会再操作。");
					}
				}
			});
	}
	}
	
/*添加所购商品的数量*/
function addNumber(addTag,id){
	var number=addTag.previousElementSibling;
	number.value=number.value*1+1;
	$.ajax({
				url : "${pageContext.request.contextPath }/updateCartsAdd.do",
				type : "post",
				// data表示发送的数据
				data : JSON.stringify({
					goods_id : id,
					number : number.value
				}),
				// 定义发送请求的数据格式为JSON字符串
				contentType : "application/json;charset=UTF-8",
				//定义回调响应的数据格式为JSON字符串,该属性可以省略
				dataType : "json",
				//成功响应的结果
				success : function(data) {
					if (data != null) {
						alert("该商品的数量成功+1");
					}else{
						alert("请求错误，等待一会再操作。");
					}
				}
			});

}

	
/*复选框全选或全不选效果*/
function selectAll(){
	var oInput = document.getElementsByName("cartCheckBox");
 for (var i=0;i<oInput.length;i++){
 	    oInput[i].checked = document.getElementById("allCheckBox").checked;
	}
 
}

/*自动计算商品的总金额、总共节省的金额和积分*/
function productCount(){
	var total=0;      //商品金额总计
	var price;     //每一行商品的单价
	var number;    //每一行商品的数量

     /*访问ID为shopping表格中所有的行数*/
	var myTableTr = document.getElementById("shopping").getElementsByTagName("tr"); 
	if(myTableTr.length>0){
	for(var i=1;i<myTableTr.length;i++){/*从1开始，第一行的标题不计算*/
	    if(myTableTr[i].getElementsByTagName("td").length>2){ //最后一行不计算
		price=myTableTr[i].getElementsByTagName("td")[4].innerHTML;
		number=myTableTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
		total+=price*number;
		myTableTr[i].getElementsByTagName("td")[6].innerHTML=price*number;
		}
	}
	document.getElementById("total").innerHTML=total;
	document.getElementById("integral").innerHTML=integral;
	
	}
}
window.onload=productCount;
	
/*根据单个复选框的选择情况确定全选复选框是否被选中*/
function selectSingle(){
	var k=0;
	var oInput=document.getElementsByName("cartCheckBox");
	 for (var i=0;i<oInput.length;i++){
	   if(oInput[i].checked==false){
		  k=1;
		  break;
	    }
	}
	if(k==0){
		document.getElementById("allCheckBox").checked=true;
		
		}
	else{
		document.getElementById("allCheckBox").checked=false;
		}
}

</script>
<style>
body{
	margin:0px;
	padding:0px;
	font-size:12px;
	line-height:20px;
	color:#333;
	background-image:url(${pageContext.request.contextPath}/img/7.jpg) ;
   }
ul,li,ol,h1,dl,dd{
	list-style:none;
	margin:0px;
	padding:0px;
	}
a{
	color:#1965b3;
    text-decoration: none;
	}    
a:hover{
	color:#CD590C;
	text-decoration:underline;
	}
img{
	border:0px;
	vertical-align:middle;
	}
.shop_images{
	width:120px;
    height:120px;}
    border:0px;
	vertical-align:middle;
#header{
	height:40px;
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#nav{
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	font-size:36px;
	font-family: "隶书";
	}
#navlist{
	width:800px;
	margin:0px auto 0px auto;
	height:23px;
	}
	#navlist li{
		float:left;
		height:23px;
		line-height:26px;
	}
	
	.navlist_red_arrow{
		background-color:#ff6600;
		background-image:url(${pageContext.request.contextPath}/img/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray{
		background-color:#e4e4e4;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		width:150px;
		}
	.navlist_gray_arrow{
		background-color:#e4e4e4;
		background-image:url(${pageContext.request.contextPath}/img/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray_right{
		background-image:url(${pageContext.request.contextPath}/img/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -138px;
		width:3px;
		}
#content{
	width:800px;
	margin:10px auto 5px auto;
	clear:both;
	}
	.title_1{
		text-align:center;
		width:50px;
		}
	.title_2{
		text-align:center;
		}
	.title_3{
		text-align:center;
		width:80px;
		}
	.title_4{
		text-align:center;
		width:80px;
		}
	.title_5{
		text-align:center;
		width:100px;
		}
	.title_6{
		text-align:center;
		width:80px;
		}
	.title_7{
		text-align:center;
		width:60px;
		}
	.line{
		background-color:#a7cbff;
		height:3px;
		}
	.shopInfo{
		padding-left:10px;
		height:35px;
		vertical-align:bottom;
		}
	.num_input{
		border:solid 1px #666;
		width:25px;
		height:15px;
		text-align:center;
		}
	.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
		background-color: 	
#D3D3D3;
		border-bottom:solid 1px #d1ecff;
		border-top:solid 1px #d1ecff;
		text-align:center;
		padding:5px;
		}
		
	.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
		border-right:solid 1px #FFF;
		}
	.cart_td_3{
		text-align:left;
		}
	.cart_td_4{
		font-weight:bold;
		}
	.cart_td_7{
		font-weight:bold;
		color:#fe6400;
		font-size:14px;
		}
	.hand{
		cursor:pointer;
		}
.shopend{
	text-align:right;
	padding-right:10px;
	padding-bottom:10px;
	}
.yellow{
	font-weight:bold;
	color:#fe6400;
	font-size:18px;
	line-height:40px;
	}
</style>
</head>

<body>

	<div id="header"><img src="${pageContext.request.contextPath}/img/6.jpg" alt="logo" /></div>
		<div id="nav">
			<a href="${pageContext.request.contextPath }/home.do">返回首页</a>
			<a href="https://i.taobao.com/my_taobao.htm?spm=a21bo.2017.1997525045.1.4c7411d9JYenji">我的淘宝</a>  
			<a >我的购物车</a>
		</div>
		<div id="navlist">
			<ul>
				<li><img src="${pageContext.request.contextPath }/img/step_01.jfif"/></li>
			</ul>
		</div>

		<div id="content">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
				<form action="" method="post" name="myform">
					<tr>
						<td class="title_1">
						<input id="allChecxkBox" type="checkbox" value="" onclick="selectAll()" />
						全选
						</td>
						<td class="title_2" colspan="2">宝贝</td>
						<td class="title_3"></td>
						<td class="title_4">单价（元）</td>
						<td class="title_5">数量</td>
						<td class="title_6">小计（元）</td>
						<td class="title_7">操作</td>
					</tr>
					<tr>
						<td colspan="8" class="line"></td>
					</tr>
					
					
					
			<c:forEach var="carts" items="${carts }">
					<tr>
						<td colspan="8" class="shopInfo">
						店铺：<a href="#">${carts.merchant }</a> 卖家：<a href="#">${carts.seller } </a> 
						<img src="${pageContext.request.contextPath}/img/taobao_relation.jpg" alt="relation" /></td>
					</tr>
					
					<tr class="product">
						<td class="cart_td_1">
						<input name="cartCheckBox" type="checkbox" value="product" onclick="selectSingle()"/>
						</td>
						<td class="cart_td_2">
						<img src="${pageContext.request.contextPath}/img/${carts.image }" class="shop_images" alt="shopping" />
						</td>
						<td class="cart_td_3">
						<a href="#">${carts.description }</a><br /> 保障：
						<img src="${pageContext.request.contextPath}/img/taobao_icon_01.jpg" alt="icon" />
						<img src="${pageContext.request.contextPath}/img/taobao_icon_02.jpg" alt="icon" />
						</td>
						<td class="cart_td_4"></td>
						<td class="cart_td_5">${carts.price }</td>
						<td class="cart_td_6">
						<img src="${pageContext.request.contextPath}/img/taobao_minus.jpg" alt="minus" onclick="minusNumber(this,${carts.goods_id })" class="hand"/> 
			        	<input id="numberId" type="text" value="${carts.number }" class="num_input" readonly="readonly" /> 
						<img src="${pageContext.request.contextPath}/img/taobao_adding.jpg" alt="add" onclick="addNumber(this,${carts.goods_id })" class="hand"/>
					    </td>
						<td class="cart_td_7"">${carts.sum}</td>
						<td class="cart_td_8">
						<a href="${pageContext.request.contextPath}/deleteCarts.do?goods_id=${carts.goods_id }"
									role="button">删除</a>
						</td>
					</tr>
					
	</c:forEach>

					<tr>
						<td colspan="3">
							<a href="https://www.bilibili.com/">
							<!-- 图片就位删除所选字样，店家图片执行相应函数 -->
							<img src="${pageContext.request.contextPath}/img/taobao_logo.gif" alt="taobao" />
							</a>
						</td>
						<td colspan="5" class="shopend">商品总价（不含运费）：
						<label id="total" class="yellow"></label> 元<br /> 
						<button><a href="${pageContext.request.contextPath}/zf.do" >立即支付</a></button> <label class="yellow"></label></td>
					</tr>
				</form>
			</table>

		</div>


</body>
</html>